<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/templates/template.xhtml">

    <ui:define name="title"><h:outputText value="Maintain Module" /></ui:define>
    <ui:define name="header"><h:outputText value="Maintain Module" /></ui:define>
    
    <ui:define name="content">
        <h:form id="moduleForm">
            
            <hr/>
            <p:dataTable var="module" value="#{moduleView.allModule}" rows="10" id="moduleTable"
                         paginator="true"
                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,15"
                         selection="#{moduleView.selectedModules}" 
                         rowKey="#{module.id}"
                         >
                <p:column selectionMode="multiple" style="width:16px;text-align:center"/>

                <p:column headerText="Module Name">
                    <h:outputText value="#{module.name}" />
                </p:column>
                
                <p:column headerText="Module Code">
                    <h:outputText value="#{module.code}" />
                </p:column>
                
                <p:column style="width:32px;text-align: center">
                    <p:commandButton update=":editModuleForm" icon="ui-icon-pencil" title="Edit" oncomplete="PF('editModuleDialog').show()">
                       <f:setPropertyActionListener value="#{module}" target="#{moduleView.selectedModule}" />
                       <p:resetInput target=":editModuleForm" />
                   </p:commandButton>
               </p:column>

                <f:facet name="footer">
                    <p:commandButton onclick="PF('newModuleDialog').show()" value="Create Module" >
                        <p:resetInput target=":createModuleForm" />
                    </p:commandButton>
                        <p:commandButton actionListener="#{moduleView.deleteModule}" update=":moduleForm" icon="ui-icon-trash" value="Delete" />
                </f:facet>
            </p:dataTable>
            <hr/>
            
        </h:form>
        
        <p:dialog header="Create new Module" widgetVar="newModuleDialog" resizable="false" >
            
            <h:form id="createModuleForm">
                <p:panelGrid id="displayNewUser" columns="2" >   
                    <h:outputText value="Module Name"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{moduleView.newModule.name}" required="true" requiredMessage="Please Enter Module Name." id="name"/>
                        <p:message for="name"/>    
                    </h:panelGroup>
                    
                    <h:outputText value="Module Code"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{moduleView.newModule.code}" 
                                     required="true" 
                                     requiredMessage="Please Enter Module Code." 
                                     id="moduleCode"
                                     validator="#{moduleView.validateModuleCode}"/>
                        <p:message for="moduleCode"/>   
                    </h:panelGroup>
                </p:panelGrid>
                
                <p:commandButton value="Create" update=":createModuleForm, :moduleForm "  
                                 oncomplete=" handleSubmitRequest(xhr, status, args, 'newModuleDialog','createModuleForm');" 
                                 actionListener="#{moduleView.createModule()}"/>
                <p:commandButton type="reset" value="Reset"></p:commandButton>
            </h:form>
            
        </p:dialog>
        
        <p:dialog header="Edit Module" widgetVar="editModuleDialog" resizable="false" >
            
            <h:form id="editModuleForm">
                <h:inputHidden value="#{moduleView.selectedModule.id}" id="id"/>
                <p:panelGrid id="displayEditUser" columns="2" rendered="#{not empty moduleView.selectedModule}">  
                    
                    <h:outputText value="Module Name"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{moduleView.selectedModule.name}" required="true" requiredMessage="Please Enter Module Name." id="name"/>
                        <p:message for="name"/>    
                    </h:panelGroup>
                    
                    <h:outputText value="Module Code"></h:outputText>
                    <h:panelGroup>
                        <p:inputText value="#{moduleView.selectedModule.code}" 
                                     required="true" 
                                     requiredMessage="Please Enter Module Code." 
                                     id="moduleCode"
                                     validator="#{moduleView.validateModuleCode}"/>
                        <p:message for="moduleCode"/>   
                    </h:panelGroup>
                </p:panelGrid>
                
                <p:commandButton value="Edit" update=":editModuleForm, :moduleForm "  
                                 oncomplete=" handleSubmitRequest(xhr, status, args, 'editModuleDialog','editModuleForm');" 
                                 actionListener="#{moduleView.editModule()}"/>
                <p:commandButton type="reset" value="Reset"></p:commandButton>
            </h:form>
            
        </p:dialog>
        
        <script type="text/javascript">  
            function handleSubmitRequest(xhr, status, args, dialogName, formName) {  
                    dialog = jQuery('#'+dialogName);
                if(args.validationFailed) {  
                    dialog.effect("shake", { times:3 }, 100);  
                } else {
                    clearForm(formName);
                    PF('newModuleDialog').hide(); 
                    PF('editModuleDialog').hide(); 
                }  
            }
            function clearForm(formName){
                jQuery('#'+formName).each(function(){
                        this.reset();
                });
            }
        </script> 
</ui:define>

</ui:composition>

